<template>
  <div class="common-container">
    <main-title />
    <div class="content-wrap">
      <div class="search-wrap">
        <div class="common-search ym-box">
          <el-form :model="queryForm" inline>
            <el-form-item label="用户">
              <el-select v-model="queryForm.uid" filterable clearable @change="search">
                <el-option
                  v-for="item in userData"
                  :key="item.uid"
                  :label="item.name"
                  :value="item.uid"
                />
              </el-select>
            </el-form-item>

            <time-comb
              v-model:startDate="queryForm.beginTime"
              v-model:endDate="queryForm.endTime"
              style="display: inline-flex"
              label="操作时间"
              @change-time="search"
            />
            <el-form-item label="" class="auto">
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="table-wrap ym-box">
        <ym-table
          v-loading="state.tableLoading"
          :data="state.tableData"
          :column-data="columnData"
          :style="{ height: `${tableHeight}px` }"
          :height="tableHeight"
          :operator-show="false"
        />
        <pagination
          v-model:currentPage="state.pageObj.pageNum"
          v-model:pageSize="state.pageObj.pageSize"
          :total="state.pageObj.total"
          @pagination="search"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { TimeComb } from '@/components/CommonSearch'

import { getLog } from '@/api/backend/log'
import { getUserListExceptMe } from '@/api/user'

import { useTable } from '@/utils/common'

import { commonHandle } from '@/views/mixins/common'
import tableOptions from '&/mixins/tableOptions'
import { MainTitle, Pagination, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { tableHeight } = useTable(tableOptions)

const { state, handleSearch } = commonHandle()

const columnData = [
  {
    label: '账号',
    prop: 'loginId',
    width: '100',
  },
  {
    label: '用户名',
    prop: 'loginName',
  },
  {
    label: '操作记录',
    prop: 'infoValue',
    minWidth: '200',
  },
  {
    label: '操作时间',
    prop: 'createTime',
    minWidth: '160',
  },
  // {
  //   label: '操作时长',
  //   prop: 'spend'
  // },
  {
    label: 'IP',
    prop: 'ip',
  },
  {
    label: '浏览器',
    prop: 'browser',
  },
  {
    label: '操作系统',
    prop: 'infoType',
  },
]

const queryForm = reactive({
  uid: '',
  beginTime: '',
  endTime: '',
})

const userData: IBaseObj = ref([])

const getUserData = async () => {
  const ret = await getUserListExceptMe(0)
  userData.value = ret || []
}
getUserData()

const search = () => {
  handleSearch(getLog, { ...queryForm })
}
search()
</script>

<style lang="scss" scoped>
:deep() {
  .common-search {
    .el-form-item {
      &.auto {
        .el-form-item__content {
          width: auto;
        }
      }
    }
  }
}
</style>
